<template>
  <div>
    <h1>App</h1>
    <h2>{{ $route.fullPath }}</h2>
    <ul>
      <li>
        <RouterLink to="/card">/card</RouterLink>
      </li>
      <li>
        <RouterLink to="/card/header">/card/header</RouterLink>
      </li>
      <li>
        <RouterLink to="/card/body">/card/body</RouterLink>
      </li>
      <li>
        <RouterLink to="/user">/user</RouterLink>
      </li>
      <li>
        <RouterLink to="/user/posts/10">/user/posts</RouterLink>
      </li>
    </ul>
    <button @click="$router.push('/user/post/20')">/user/post/20</button>
    <!-- <button @click="$router.go(-1)">后退</button> -->
    <button @click="$router.back()">后退</button>
    <!-- <button @click="$router.go(1)">前进</button> -->
    <button @click="$router.forward()">前进</button>
    <button @click="$router.go(0)">刷新</button>
    <RouterView></RouterView>
  </div>
</template>
<script setup>
import { watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();

</script>
<style>
div {
  border: solid;
  padding: 20px;
}
</style>
